<template>
  <div class="auto-scroll-list" :style="{ width, height }">
    <slot name="header"></slot>
    <div ref="oList" class="list">
      <div ref="oInnerList" id="innerDom" class="inner-list">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>


import { onMounted, ref, watch } from "vue";
import useAutoScroll from "./auto";

const props = defineProps({
  width: { type: String, default: "100%" },
  height: { type: String, default: "100%" },
  lists: { type: Array, default: () => [] }, //  数据长度
});

//  配置项
const classOption = {
  step: 0.5, // 数值越大速度滚动越快
  limitMoveNum: 5, // 开始无缝滚动的数据量
  hoverStop: true, // 是否开启鼠标悬停stop
  direction: 1, // 滚动方向；0向下 1向上 2向左 3向右
  openWatch: true, // 开启数据实时监控刷新dom
  singleHeight: 0, // 单步运动停止的高度
  waitTime: 1000, // 单步运动停止的时间
};

const oList = ref<Element | null>(null) as any;
const oInnerList = ref<Element | null>(null) as any;

const [setAutoScroll] = useAutoScroll({
  outerDom: oList, // 绑定dom
  innerDom: oInnerList,
  classOption, // 配置项
});

//  监听数据变化
watch(
  () => props.lists,
  (val, oldVal) => {
    setAutoScroll();
  }
);

// 初始化
onMounted(() => {
  setAutoScroll();
});
</script>

<style lang="scss" scoped>
.auto-scroll-list {
  display: flex;
  flex-direction: column;

  .list {
    position: relative;
    top: 0;
    left: 0;
    flex: 1;
    // overflow-y: auto;
    overflow-y: hidden;

    .loading-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .inner-list {
      position: absolute;
      width: 100%;
      min-height: 100%;
      transform-style: preserve-3d;
      will-change: transform; //  优化滚动性能
    }
  }
}
</style>